<template>
  <el-card class="box-card card-header m-t-20">
    <div slot="header" class="clearfix f-medium">
      <i class="fa fa-folder-open m-r-10 text-c-blue" aria-hidden="true"></i>
      <span>记录详情</span>
    </div>
    <div>
      <h2 class="f-w-400">
        <i class="fa fa-caret-right text-c-green m-r-10" aria-hidden="true"></i>{{ currentPlan.title }}
      </h2>
      <div class="flex-row-between p-10">
        <div>
          执行次数:
          <span class="text-c-blue f-w-700">{{ currentPlan.count }}</span>
        </div>
        <div class="text-c-gray f-small">制定时间: {{ currentPlan.time }}</div>
      </div>
      <TableCreator :colsConfig="columnConfig" :data="planDetail" class="planTable" height="350" stripe
        highlight-current-row @current-change="handleSelect"></TableCreator>
    </div>
  </el-card>
</template>

<script>
import { columnConfig } from '../config/recode-tableconfig'
import { mapState } from "vuex";
export default {
  name: "RecodeDetails",
  data() {
    return {
      columnConfig
    };
  },
  methods: {
    handleSelect(row) {
      this.$store.commit("cruiseRecord/setPhotosList", row.photoList);
    },
  },
  computed: {
    ...mapState("cruiseRecord", ["planDetail", "currentPlan"]),
  },
};
</script>

<style scoped lang="less">
/deep/ .el-table th.el-table__cell>.cell,
/deep/ .el-table td.el-table__cell div {
  text-align: center !important;
}

.card-header {
  /deep/ .el-card__header {
    border-left: 5px solid var(--blue);
  }
}
</style>